<template>
  <div>
    <van-nav-bar
      title="会员登陆"
      left-arrow
      @click-left="this.$router.back()"
    />
    <div class="title">
      <h1>手机号登录</h1>
      <p>未注册的手机号登陆后将自动注册</p>
    </div>
    <form action="">
      <input type="text" id="phone" placeholder="请输入手机号" v-model="phoneNumber">
      <div class="verificationCode">
        <input type="text" id="verificationCode" placeholder="请输入图形验证码" v-model="enterPicCode">
        <img v-if="this.codeUrl" :src="this.codeUrl" alt="" @click="getCodeUrl">
      </div>
      <div class="txt">
        <input type="text" id="txt" placeholder="请输入短信验证码" v-model="enterTxtCode">
        <span @click="getVerificationCode">
          {{ second===60 ? '获取验证码' : second + `秒后重新发送` }}
        </span>
      </div>
    </form>
    <button class="login-btn" @click="txtLoginIndex">登录</button>

  </div>
</template>

<script>
import { getCodeUrl, getTxtVerification, txtLogin } from '@/api/login'

export default {
  name: 'LoginIndex',
  data () {
    return {
      codeUrl: '', // 图片验证码地址
      codeKey: '', // 图片验证码钥匙
      second: 60,
      timer: null,
      phoneNumber: '',
      enterTxtCode: '', // 用户输入的短信验证码
      enterPicCode: '' // 用户输入的图片验证码
    }
  },
  created () {
    this.getCodeUrl()
  },
  methods: {
    async txtLoginIndex () {
      if (!this.validFn()) {
        return
      }
      if (!/^\d{6}$/.test(this.enterTxtCode)) {
        this.$toast('请输入正确的手机验证码')
        return
      }
      const res = await txtLogin(this.phoneNumber, this.enterTxtCode)
      // console.log(res)
      if (res.status === 200) {
        this.$toast.success('登陆成功')
        this.$store.commit('user/setUser', res.data)
        setTimeout(() => {
          if (this.$route.query.backUrl) {
            this.$router.replace(this.$route.query.backUrl)
          } else {
            this.$router.push('/')
          }
        }, 3000)
      }
    },
    async getCodeUrl () {
      const res = await getCodeUrl()
      // console.log(res)
      this.codeUrl = res.data.base64
      this.codeKey = res.data.key
    },
    getVerificationCode () {
      if (!this.timer && this.second === 60) {
        this.getTxtVerificationCode()
        this.timer = setInterval(() => {
          this.second--
          if (this.second <= 0) {
            clearInterval(this.timer)
            this.timer = null
            this.second = 60
          }
        }, 1000)
      }
    },
    validFn () {
      if (!/^1[3-9]\d{9}$/.test(this.phoneNumber)) {
        this.$toast.fail('请输入正确的电话号码')
        return false
      }
      if (!/^\w{4}$/.test(this.enterPicCode)) {
        this.$toast.fail('请输入正确的图形验证码')
        return false
      }
      return true
    },
    async getTxtVerificationCode () {
      if (this.validFn()) {
        const res = await getTxtVerification(this.enterPicCode, this.codeKey, this.phoneNumber)
        // console.log(res)
        if (res.status === 200) {
          this.$toast.success('验证码已发送，注意查收')
        }
      }
    },
    destroyed () {
      clearInterval(this.timer)
    }
  }
}
</script>

<style scoped lang="less">
.title {
  margin-top: 50px;
  margin-left: 50px;
  h1 {
    font-weight: normal;
    margin-bottom: 10px;
  }
  p {
    color: rgba(115, 114, 114, 0.93);
  }
}
input {
  display: block;
  margin-left: 50px;
  margin-bottom: 20px;
  border: none;
  width: 290px;
  height: 50px;
  border-bottom: 1px solid rgba(102, 102, 102, 0.3);
  padding-left: 5px;
}
#phone {
  margin-top: 50px;
}
.verificationCode {
  position: relative;
  img {
    position: absolute;
    right: 46px;
    top: 3px;
    height: 40px;
    width: 100px;
  }
}
.txt {
  position: relative;
  span {
    position: absolute;
    right: 40px;
    top: 10px;
    color: #e68306;
  }
}
.login-btn {
  border: none;
  margin-left: 50px;
  width: 290px;
  height: 50px;
  margin-top: 40px;
  border-radius: 55px;
  color: #fff;
  background: linear-gradient( 90deg, #ecb53c, #ff9211);
}
</style>
